import React from 'react';
import { Text, router, publishDps, View, Image, ScrollView } from '@ray-js/ray';
import clsx from 'clsx';
import { useProps } from '@ray-js/panel-sdk';
import { useThrottleFn } from 'ahooks';
import Strings from '@/i18n';
import { Icon } from '@ray-js/smart-ui';
import { useSelector } from 'react-redux';
import { ReduxState } from '@/redux';
import { getCurrentByIndex } from '@/components/SongSet';
import { getCachedSystemInfo } from '@/api/getCachedSystemInfo';
import { decodeClock, encodeClock, repeatArrtoStr } from './util';
import styles from './index.module.less';
import { Switch } from '../Switch';

const { safeArea } = getCachedSystemInfo();

const { height } = safeArea;

export const arrowPath =
  'M724.48 521.728c-1.8432 7.7824-5.7344 14.848-11.3664 20.48l-341.9136 342.016c-16.6912 16.6912-43.7248 16.6912-60.3136 0s-16.6912-43.7248 0-60.3136L622.6944 512 310.8864 200.0896c-16.6912-16.6912-16.6912-43.7248 0-60.3136 16.6912-16.6912 43.7248-16.6912 60.3136 0l341.9136 341.9136c10.8544 10.8544 14.6432 26.112 11.3664 40.0384z';

const AlarmItem = ({ item }) => {
  const handleJump = useThrottleFn(
    (code: string) => {
      router.push(`/${code}`);
    },
    { wait: 80 }
  ).run;
  const renderTime = (time: number, is24: boolean) => {
    let hours = Math.floor(time / 60);
    let period = hours >= 12 ? Strings.getLang('PM') : Strings.getLang('AM');

    if (!is24) hours = hours % 12 || 12;

    if (is24) period = '';

    const minutes = time % 60;

    return (
      <View className={styles.timeBox}>
        <Text className={styles.hour}>{`${
          is24 ? String(hours).padStart(2, '0') : String(hours)
        }:${String(minutes).padStart(2, '0')}`}</Text>
        <Text className={styles.ap}>{period}</Text>
      </View>
    );
  };

  const currentMuisc = getCurrentByIndex(item.music);

  return (
    <View
      className={clsx(styles.item)}
      onClick={() => {
        handleJump(`clockEdit?code=${item.code}&enabledDelete=${item.enabledDelete}`);
      }}
    >
      <View>
        <Text className={styles.title}>{item.title}</Text>
        <Text
          style={{
            marginInline: 10,
          }}
        >
          |
        </Text>
        <Text>{repeatArrtoStr(item.repeat)}</Text>
      </View>
      <View className={clsx(styles.centerBox)}>
        <View>{renderTime(item.startTime, item.timeMode === '24h')}</View>
        <View>
          <Switch
            value={item.status}
            showText={false}
            onValueChange={value => {
              const newValue = {
                ...item,
                status: value,
              };
              publishDps({
                [item.code]: encodeClock(newValue),
              });
            }}
          />
        </View>
      </View>
      <View className={styles.botBox}>
        <View className={styles.musicBox}>
          <Image src={currentMuisc?.imageActive} className={styles.musicImage} />
          <Text>{currentMuisc?.name}</Text>
        </View>
        <Icon name={arrowPath} color="#000" />
      </View>
    </View>
  );
};

export function AlarmList() {
  const {
    clock_1: clock1,
    clock_2: clock2,
    clock_3: clock3,
    clock_4: clock4,
    clock_5: clock5,
    clock_6: clock6,
    clock_7: clock7,
    time_mode: timeMode,
  } = useProps(props => props);

  const { clockNames } = useSelector((state: ReduxState) => state?.cloudState) || {};

  const clockList = [
    {
      ...decodeClock(clock1, 'clock_1'),
      title: clockNames?.clock_1 || 'Alarm 1',
      timeMode,
      enabledDelete: false,
    },
    {
      ...decodeClock(clock2, 'clock_2'),
      title: clockNames?.clock_2 || 'Alarm 2',
      timeMode,
      enabledDelete: false,
    },
    {
      ...decodeClock(clock3, 'clock_3'),
      title: clockNames?.clock_3 || 'Alarm 3',
      timeMode,
      enabledDelete: false,
    },
    {
      ...decodeClock(clock4, 'clock_4'),
      title: clockNames?.clock_4 || 'Alarm 4',
      timeMode,
      enabledDelete: true,
    },
    {
      ...decodeClock(clock5, 'clock_5'),
      title: clockNames?.clock_5 || 'Alarm 5',
      timeMode,
      enabledDelete: true,
    },
    {
      ...decodeClock(clock6, 'clock_6'),
      title: clockNames?.clock_6 || 'Alarm 6',
      timeMode,
      enabledDelete: true,
    },
    {
      ...decodeClock(clock7, 'clock_7'),
      title: clockNames?.clock_7 || 'Alarm 7',
      timeMode,
      enabledDelete: true,
    },
  ];

  const showList = clockList.filter((item, index) => !item.unSetted || index < 3);

  return (
    <ScrollView
      scrollY
      style={{
        height: `calc(${height}px - 150px)`,
      }}
    >
      <View
        className={styles.container}
        style={{
          height: `${380 * showList.length}rpx`,
        }}
      >
        {showList.map((item, index) => {
          return <AlarmItem item={item} key={item.code} />;
        })}
      </View>
    </ScrollView>
  );
}
